<td-layout-nav class="white" logo="assets:covalent" navigationRoute="/">
  <button mat-icon-button td-menu-button tdLayoutToggle>
    <mat-icon>menu</mat-icon>
  </button>
  <div td-toolbar-content layout="row" layout-align="center center" flex>
    <span>Product Name</span>
    <span flex></span>
    <a mat-icon-button matTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><mat-icon>chrome_reader_mode</mat-icon></a>
    <a mat-icon-button matTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><mat-icon svgIcon="assets:github"></mat-icon></a>
  </div>
  <td-layout-manage-list
                        [opened]="media.registerQuery('gt-sm') | async"
                        [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
                        [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
    <mat-nav-list td-sidenav-content [tdLayoutManageListClose]="!media.query('gt-sm')">
      <a mat-list-item>
        <mat-icon>dashboard</mat-icon>
        Dashboard
      </a>
      <a mat-list-item>
        <mat-icon>people</mat-icon>
        Customers
      </a>
      <a mat-list-item>
        <mat-icon>receipt</mat-icon>
        Log
      </a>
      <a mat-list-item>
        <mat-icon>settings</mat-icon>
        Settings
      </a>
    </mat-nav-list>
    <div td-toolbar-content layout="row" layout-align="start center" flex>
      <a mat-icon-button [routerLink]="['/product']"><mat-icon>arrow_back</mat-icon></a>
      <span>New Item</span>
      <span flex></span>
    </div>
    <div class="md-content" class="inset">
      <form>
        <mat-card>
          <td-steps>
            <td-step #step1 label="Step 1" sublabel="simple metadata" [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
              <div layout-gt-xs="row">
                <div class="pad">
                  <mat-form-field>
                    <input matInput placeholder="Entry name (10 max)" maxlength="10" #inputHint>
                    <mat-hint align="end">{{inputHint.value.length}} / 10</mat-hint>
                  </mat-form-field>
                </div>
                <div class="pad">
                  <mat-form-field>
                    <input matInput type="number" placeholder="Budget" align="end">
                    <span md-prefix>$&nbsp;</span>
                    <span md-suffix>.00</span>
                  </mat-form-field>
                </div>
              </div>
            </td-step>
            <td-step #step2 label="Step 2" sublabel="this step must be validated" [state]="stateStep2" [disabled]="disabled">
              <mat-radio-group>
                <mat-radio-button value="option_1">A New Hope</mat-radio-button>
                <mat-radio-button value="option_2">Empire Strikes Back</mat-radio-button>
              </mat-radio-group>
              <mat-slide-toggle [checked]="true">
                Include Awesome
              </mat-slide-toggle>
              <ng-template td-step-actions>
                <button mat-raised-button color="primary" (click)="toggleRequiredStep2()">Validate &amp; Proceed</button>
                <button mat-button (click)="step2.active = false">Cancel</button>
              </ng-template>
            </td-step>
            <td-step #step3 label="Step 3" sublabel="this step will toggle complete" [state]="stateStep3" [disabled]="disabled">
              <mat-checkbox [checked]="true">
                I agree to spread the word about Covalent
              </mat-checkbox>
              <ng-template td-step-actions>
                <button mat-raised-button color="primary" (click)="toggleCompleteStep3()">Complete Step</button>
                <button mat-button (click)="step3.active = false">Cancel</button>
              </ng-template>
              <ng-template td-step-summary>
                You can add a summary that shows after a step is saved.
              </ng-template>
            </td-step>
          </td-steps>
          <mat-divider></mat-divider>
          <mat-card-actions>
            <button mat-raised-button color="accent" [routerLink]="['/product']">Save &amp; Create</button>
            <button mat-button class="tc-grey-600"  [routerLink]="['/product']">Cancel</button>
          </mat-card-actions>
        </mat-card>
      </form>
    </div>
  </td-layout-manage-list>
</td-layout-nav>
